<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>实例方法</title>
	<script type="text/javascript" src="../assets/js/vue.js"></script>
	<script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>
</head>
<body>
	<h1>外部调用实例方法</h1>
	<hr>
	<div id="app">
		{{message}}
		<p><button @click="add">add</button></p>

	</div>
	
	<p><button onclick="reduce()">reduce</button></p>
	<p><button onclick="off()">off</button></p>
	<p><button onclick="reduceOnce()">reduceOnce</button></p>
</body>
<script type="text/javascript">
var app = new Vue({
	el:'#app',
	data:{
		message:1
	},
	methods:{
		add:function () {
			this.message++;
		}
	}
})
app.$on("reduce",function () {
	this.message--;
})
app.$once('reduceOnce',function(){
    console.log('只执行一次的方法');
    this.message--;
 
});
function off(){
   app.$off('reduce');
}
function reduce() {
	app.$emit('reduce');
}
function reduceOnce(){
   app.$emit('reduceOnce');
}
</script>
</html>